<div class="layout_content">

    <?php echo $header; ?>

    <div class="shaixuan">
        <div class="four1 four" rel="1" onclick="sortSearch('composite',this)">综合</div>
        <div class="four2 four Cgray" rel="1" onclick="sortSearch('sales',this)">销量
            <img src="<?php echo WEBIMG; ?>/paixu_moren.png" class="img-sub oimg" id="test1"/>
        </div>
        <div class="four3 four Cgray" rel="1" onclick="sortSearch('price',this)">价格
            <img src="<?php echo WEBIMG; ?>/paixu_moren.png" class="img-sub oimg"/>
        </div>
        <div class="four4 four Cgray" onclick="ShowDiv2('guige','fade')">筛选
            <img src="<?php echo WEBIMG; ?>/shaixuan_moren.png" class="img-sub"/>
        </div>
    </div>

    <div class="sort-left graybg">
        <div id="search_box_close">
            <div class="cate_item" style="background: #fff;font-size: 12px;">
                <返回分类
            </div>
        </div>
    </div>

    <div class="product_list" style="float: left;width: 77%;">
        <?php foreach ($ApiData['productList'] as $kk => $vv) { ?>
            <div style="width: 100%;" sort-price="<?php echo $vv['sort_price']; ?>"
                 sort-sales="<?php echo $vv['sales_valume']; ?>"
                 sort-sort="<?php echo $vv['sort']; ?>"
                 class="flt border2 product_<?php echo $vv['brand_id']; ?> product_<?php echo $vv['parent_brand_id']; ?>"
                 style="width: 77%;padding: 6px 0;">
                <div class="page-product2-img text-center" style="width: 30%;">
                    <a href="<?php echo WEBROOT . '/product/detail/id/' . $vv['id'] . '.html' ?>">
                        <img src="<?php echo $vv['icon_url']; ?>">
                    </a>
                </div>
                <div class="page-product-right" style="line-height: 22px;">
                    <div class="page-product1-font1">
                        <a href="<?php echo WEBROOT . '/product/detail/id/' . $vv['id'] . '.html' ?>">
                            <?php echo $vv['name']; ?>
                        </a>
                    </div>
                    <div class="fontsize fontC"><?php echo $vv['mass_packing']; ?></div>
                    <div class="price">￥<?php echo $vv['channel_price']; ?></div>
                </div>
                <div class="flt sort-cart">
                    <a href="javascript:;" onclick="showSpec(this)">
                        <img src="<?php echo WEBIMG; ?>/addcart_normal.png"/>
                    </a>
                    <div class="pro_detail" style="display: none;">
                        <div class="pro_img">
                            <?php echo $vv['icon_url']; ?>
                        </div>
                        <div class="pro_name">
                            <?php echo $vv['name']; ?>
                        </div>
                        <div class="pro_price">
                            <?php echo $vv['channel_price']; ?>
                        </div>
                        <div class="pro_spec">
                            <?php echo $vv['mass_packing']; ?>
                        </div>
                        <div class="spec_list">
                            <?php foreach ($vv['sku_info'] as $vvv) { ?>
                                <div class="sku_box">
                                    <div class="flt shuxing-adjust">
                                        <p class="product"><?php echo $vvv['attr']; ?></p>
                                    </div>
                                    <div class="flt cart" style="width: 8%;padding-top:5px;">
                                        <label onclick="selectPro(this)"
                                               rel="<?php echo $vvv['product_id'] . '_' . $vvv['id']; ?>"></label>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>

</div>

<script>
    function sortSearch(type, el) {
        var rel = parseInt($(el).attr('rel'));
        var price_arr = [];
        var sort_arr = [];
        var sale_arr = [];
        $("#search_box .product_list>div").each(function () {
            price_arr.push(parseFloat($(this).attr('sort-price')));
            sort_arr.push(parseInt($(this).attr('sort-sort')));
            sale_arr.push(parseInt($(this).attr('sort-sales')));
        });
        var tmp = [];
        var str = '';
        switch (type) {
            case 'composite':
                tmp = sort_arr.sort();
                str = 'sort-sort';
                break;
            case 'price':
                if (rel == 1) {
                    mySort(price_arr);
                    tmp = price_arr;
                } else {
                    mySort(price_arr);
                    tmp = price_arr.reverse();
                }
                str = 'sort-price';
                break;
            case 'sales':
                if (rel == 1) {
                    tmp = sale_arr.sort();
                } else {
                    tmp = sale_arr.reverse();
                }
                str = 'sort-sales';
                break;
        }
        var htmlcode = '';
        for (var i = 0; i < tmp.length; i++) {
            var dom = $("#search_box .product_list").find('div[' + str + '=' + tmp[i] + ']');
            htmlcode += dom.prop("outerHTML");
            dom.eq(0).remove();
        }
        $("#search_box .product_list").html(htmlcode);
        if (rel == 1) {
            $(el).attr('rel', 0);
            $(el).find('img').attr('src', '<?php echo WEBIMG;?>/paixu_shang.png');
        } else {
            $(el).attr('rel', 1);
            $(el).find('img').attr('src', '<?php echo WEBIMG;?>/paixu_xia.png');
        }
        $(el).siblings().find('.oimg').attr('src', '<?php echo WEBIMG;?>/paixu_moren.png');
    }
    $(function () {
        $("#search_box_close").bind('click', function () {
            $("#search_box").stop().animate({'left': '100%'}, 500);
            setTimeout('$("#search_box").html("").hide()', 500);
        });
    });
</script>